<template>
  <el-dialog
    v-el-drag-dialog
    :title="title"
    :close-on-click-modal="!fetching"
    :close-on-press-escape="!fetching"
    :show-close="!fetching"
    :visible="visible"
    :width="isTipsType ? '280px' : '35%'"
    @update:visible="updateVisible">

    <add-menu-form
      ref="addForm"
      v-if="type === '1' || type === '2'"
      v-loading="fetching"
      :form="self_form"
      />
    <update-menu-form
      ref="updateForm"
      v-else-if="type === '3'"
      v-loading="fetching"
      :form="self_form"
      />
    <p class="tips-text" v-else>
      {{ text }}
    </p>
    <div slot="footer" class="dialog-footer">
      <bs-confirm-button-icon
        :disabled="fetching"
        size="mini"
        @click.native="okClick"
        :text="'确定'" />
      <bs-cancel-button-icon :disabled="fetching" v-if="!(type === '5')" size="mini" @click.native="cancelClick" />
    </div>
  </el-dialog>
</template>

<script>
import AddMenuForm from './Form/AddMenuForm'
import UpdateMenuForm from './Form/UpdateMenuForm'
import elDragDialog from '@/directive/el-drag-dialog'
export default {
  directives: {
    elDragDialog
  },
  components: {
    AddMenuForm,
    UpdateMenuForm
  },
  props: {
    form: {
      type: Object,
      required: true
    },
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: '1' // 1 新增子目录 2 新增一级目录 3 编辑目录 4 删除目录 5 提示弹窗
    },
    text: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      self_form: null,
      fetching: false // 异步处理进行中标识符
    }
  },
  watch: {
    form(v) {
      if (!v) {
        this.self_form = null
      } else {
        this.self_form = {
          ...v
        }
      }
    }
  },
  computed: {
    title() {
      switch (this.type) {
        case '1': return '添加目录';
        case '2': return '添加一级目录';
        case '3': return '编辑目录';
        case '4':
        case '5': return '提示';
        default: return '未知类型'
      }
    },
    isTipsType() {
      return this.type === '4' || this.type === '5'
    }
  },
  methods: {
    updateVisible(v) {
      this.$emit('update:visible', v)
    },
    okClick(v) {
      switch (this.type) {
        case '1':
        case '2':
          this.$refs.addForm.$refs.form.validate((bool, err) => {
            if (bool) {
              this.fetching = true
              this.$emit('addClick', this.self_form, this.fetchingEndCb)
            } else {
              for(const key in err) {
                this.$message.error(err[key][0].message)
                break;
              }
            }
          })
          break
        case '3':
          this.$refs.updateForm.$refs.form.validate((bool, err) => {
            if (bool) {
              this.fetching = true
              this.$emit('updateClick', this.self_form, this.fetchingEndCb)
            } else {
              for(const key in err) {
                this.$message.error(err[key][0].message)
                break;
              }
            }
          })
          break
        case '4':
          this.fetching = true
          this.$emit('delClick', this.self_form, this.fetchingEndCb)
          break
        default: this.updateVisible(false)
      }
    },
    fetchingEndCb(bool) {
      this.fetching = false
      bool && this.updateVisible(false)
    },
    cancelClick() {
      this.updateVisible(false)
    }
  }
}
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: center;
}
.tips-text {
  text-align: center;
}
</style>
